<template>
	<i-card @click="toDetail" bottom="24rpx">
		<view class="join_body">
			<view class="image">
				<image :src="data.doorPhotoUrl"></image>
			</view>
			<view class="item_r">
				<view class="test_title">
					<text class="text">{{data.storeName}}</text>
					<image src="../../static/images/lyd_tag@2x.png" mode=""></image>
				</view>
				<text>{{data.province}} / {{data.city}}</text>
				<text>{{data.address}}</text>
			</view>
		</view>

	</i-card>
</template>

<script lang="ts" setup>
	import {
		navTo,
	} from '../../utils/common'
	import _ from 'lodash'
	import {
		ref,
		defineEmits,
		defineProps
	} from 'vue';
	const props = defineProps({
		data: {
			type: Object,
			default: () => {
				return {
					storeId: '',
					storeName: ''
				}
			}
		},
	})
	
	const emit = defineEmits(['click'])
	
	const detail = () => {
		navTo(`/pages/views/store_detail?id=${props.data.storeId}&type=join`, 'navigateTo')
	}

	const toDetail = _.debounce(detail, 500, {
		leading: true,
		trailing: false
	})
</script>

<style lang="scss" scoped>
	.join_body {
		@include flexR;
		align-items: flex-start;

		.image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 8rpx;
			background: #E5E5EA;
			margin-right: 24rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 8rpx;
			}
		}

		.item_r {
			width: 80%;
			@include flexC;
			@include dfont(24rpx);
			text {
				color: #8E8E93;
				margin-bottom: 8rpx;
			}


			.test_title {
				@include flexRS;
				width: 100%;
				.text {
					@include titlefont(32rpx);
					width: 80%;
					@include overflow;
				}
				image {
					width: 88rpx;
					height: 36rpx;
				}
			}
		}
	}
</style>